<template>
  <div class="add-product-container">
    <div class="form-header">
      <h2 class="form-title">新增产品</h2>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="goBack">取消</button>
        <button class="btn btn-primary" @click="saveProduct">保存</button>
      </div>
    </div>

    <div class="form-container">
      <form @submit.prevent="saveProduct" class="product-form">
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">商品名称 *</label>
              <input 
                type="text" 
                v-model="formData.productName" 
                class="form-input"
                placeholder="请输入商品名称"
                required
              />
            </div>
            <div class="form-group">
              <label class="form-label">生产批次 *</label>
              <input 
                type="text" 
                v-model="formData.batchNumber" 
                class="form-input"
                placeholder="请输入生产批次"
                required
              />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">保质期(天) *</label>
              <input 
                type="number" 
                v-model="formData.shelfLife" 
                class="form-input"
                placeholder="请输入保质期天数"
                min="1"
                required
              />
            </div>
            <div class="form-group">
              <label class="form-label">生产许可证号 *</label>
              <input 
                type="text" 
                v-model="formData.licenseNumber" 
                class="form-input"
                placeholder="请输入生产许可证号"
                required
              />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group full-width">
              <label class="form-label">生产企业 *</label>
              <input 
                type="text" 
                v-model="formData.enterprise" 
                class="form-input"
                placeholder="请输入生产企业名称"
                required
              />
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="section-title">产品详情</h3>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">产品规格</label>
              <input 
                type="text" 
                v-model="formData.specification" 
                class="form-input"
                placeholder="请输入产品规格"
              />
            </div>
            <div class="form-group">
              <label class="form-label">产品重量(kg)</label>
              <input 
                type="number" 
                v-model="formData.weight" 
                class="form-input"
                placeholder="请输入产品重量"
                step="0.01"
                min="0"
              />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">生产日期 *</label>
              <input 
                type="date" 
                v-model="formData.productionDate" 
                class="form-input"
                required
              />
            </div>
            <div class="form-group">
              <label class="form-label">过期日期</label>
              <input 
                type="date" 
                v-model="formData.expiryDate" 
                class="form-input"
                readonly
              />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group full-width">
              <label class="form-label">产品描述</label>
              <textarea 
                v-model="formData.description" 
                class="form-textarea"
                placeholder="请输入产品描述"
                rows="4"
              ></textarea>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="section-title">溯源信息</h3>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">原料来源</label>
              <input 
                type="text" 
                v-model="formData.rawMaterialSource" 
                class="form-input"
                placeholder="请输入原料来源"
              />
            </div>
            <div class="form-group">
              <label class="form-label">加工工艺</label>
              <input 
                type="text" 
                v-model="formData.processingMethod" 
                class="form-input"
                placeholder="请输入加工工艺"
              />
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">存储条件</label>
              <select v-model="formData.storageCondition" class="form-select">
                <option value="">请选择存储条件</option>
                <option value="常温">常温</option>
                <option value="冷藏">冷藏</option>
                <option value="冷冻">冷冻</option>
                <option value="避光">避光</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">运输方式</label>
              <select v-model="formData.transportMethod" class="form-select">
                <option value="">请选择运输方式</option>
                <option value="公路运输">公路运输</option>
                <option value="铁路运输">铁路运输</option>
                <option value="航空运输">航空运输</option>
                <option value="水路运输">水路运输</option>
              </select>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const formData = ref({
  productName: '',
  batchNumber: '',
  shelfLife: '',
  licenseNumber: '',
  enterprise: '成都爱吃兔食品加工有限公司',
  specification: '',
  weight: '',
  productionDate: '',
  expiryDate: '',
  description: '',
  rawMaterialSource: '',
  processingMethod: '',
  storageCondition: '',
  transportMethod: ''
})

// 计算过期日期
const calculateExpiryDate = computed(() => {
  if (formData.value.productionDate && formData.value.shelfLife) {
    const productionDate = new Date(formData.value.productionDate)
    const expiryDate = new Date(productionDate)
    expiryDate.setDate(expiryDate.getDate() + parseInt(formData.value.shelfLife))
    return expiryDate.toISOString().split('T')[0]
  }
  return ''
})

// 监听生产日期和保质期变化，自动计算过期日期
watch([() => formData.value.productionDate, () => formData.value.shelfLife], () => {
  formData.value.expiryDate = calculateExpiryDate.value
})

// 方法
const goBack = () => {
  router.push('/')
}

const saveProduct = () => {
  // 验证必填字段
  if (!formData.value.productName || 
      !formData.value.batchNumber || 
      !formData.value.shelfLife || 
      !formData.value.licenseNumber || 
      !formData.value.enterprise ||
      !formData.value.productionDate) {
    alert('请填写所有必填字段')
    return
  }

  // 创建新产品对象
  const newProduct = {
    id: Date.now(), // 使用时间戳作为临时ID
    productName: formData.value.productName,
    batchNumber: formData.value.batchNumber,
    shelfLife: parseInt(formData.value.shelfLife),
    licenseNumber: formData.value.licenseNumber,
    enterprise: formData.value.enterprise,
    completeness: calculateCompleteness(),
    creator: '张三',
    createTime: new Date().toLocaleString(),
    modifier: '张三',
    // 额外字段
    specification: formData.value.specification,
    weight: formData.value.weight,
    productionDate: formData.value.productionDate,
    expiryDate: formData.value.expiryDate,
    description: formData.value.description,
    rawMaterialSource: formData.value.rawMaterialSource,
    processingMethod: formData.value.processingMethod,
    storageCondition: formData.value.storageCondition,
    transportMethod: formData.value.transportMethod
  }

  // 这里可以调用API保存数据
  console.log('保存新产品:', newProduct)
  
  // 模拟保存成功
  alert('产品保存成功！')
  router.push('/')
}

// 计算信息完善度
const calculateCompleteness = () => {
  const requiredFields = [
    formData.value.productName,
    formData.value.batchNumber,
    formData.value.shelfLife,
    formData.value.licenseNumber,
    formData.value.enterprise,
    formData.value.productionDate
  ]
  
  const optionalFields = [
    formData.value.specification,
    formData.value.weight,
    formData.value.description,
    formData.value.rawMaterialSource,
    formData.value.processingMethod,
    formData.value.storageCondition,
    formData.value.transportMethod
  ]
  
  const requiredCount = requiredFields.filter(field => field).length
  const optionalCount = optionalFields.filter(field => field).length
  
  const requiredScore = (requiredCount / 6) * 60 // 必填字段占60分
  const optionalScore = (optionalCount / 7) * 40 // 可选字段占40分
  
  return Math.round(requiredScore + optionalScore)
}
</script>

<style scoped>
.add-product-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.btn-secondary:hover {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.form-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}

.product-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  flex: 2;
}

.form-label {
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-label::after {
  content: ' *';
  color: #ff4d4f;
}

.form-input,
.form-select,
.form-textarea {
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-select {
  background-color: white;
}

/* 移除必填字段的星号 */
.form-label:not([for*="required"])::after {
  content: '';
}
</style>
